<template>
	<div class="home">
		<div class="tips" v-if="tipsShow">
			<div>
				<icon-svg class="z" name="icon-yes_btn"></icon-svg>
				欢迎使用翼省钱后台管理，你本次登录时间为{{ currentTime }}，登录地址：{{
					ip || '192.168.1.1'
				}}
			</div>
			<i
				class="del el-icon-refresh"
				@click="
					() => {
						this.fetchData();
					}
				"
			></i>
		</div>
		<el-row :gutter="20" class="card-statistics">
			<el-col :md="6" :xl="6">
				<div class="card block count">
					<div class="val">
						<div class="left">
							<icon-svg class="z" name="user_icon"></icon-svg>
						</div>
						<div class="right">
							<div class="right-head">
								<div class="icon"></div>
								今日新增
							</div>
							<p class="visit-p">{{ user[3].value }}</p>
						</div>
						<div class="right">
							<div class="right-head">
								<div class="icon"></div>
								用户总数
							</div>
							<p class="visit-p">{{ usersTotal }}</p>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :md="6" :xl="6">
				<div class="card block people">
					<div class="val">
						<div class="left">
							<icon-svg class="z" name="visit_icon"></icon-svg>
						</div>
						<div class="right">
							<div class="right-head visit ">
								<div class="icon"></div>
								今日访问人数
							</div>
							<p class="visit-p">{{ user[2].value }}</p>
						</div>
						<div class="right ">
							<div class="right-head  visit ">
								<div class="icon"></div>
								30天访问人数
							</div>
							<p class="visit-p">{{ user[5].value }}</p>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :md="6" :xl="6">
				<div class="card block estimate">
					<div class="val">
						<div class="left">
							<icon-svg class="z" name="estimate_icon"></icon-svg>
						</div>
						<div class="right">
							<div class="right-head estimate ">
								<div class="icon"></div>
								本月预估
							</div>
							<p class="visit-p">{{ thisMonthPay }}</p>
						</div>
						<div class="right">
							<div class="right-head estimate ">
								<div class="icon"></div>
								上月预估
							</div>
							<p class="visit-p">{{ lastMonthPay }}</p>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :md="6" :xl="6">
				<div class="card block withdraw">
					<div class="val">
						<div class="left">
							<icon-svg class="z" name="withdrawal_icon"></icon-svg>
						</div>
						<div class="right">
							<div class="right-head withdraw ">
								<div class="icon"></div>
								可提现
							</div>
							<p class="visit-p">{{ withdrawcanTotal }}</p>
						</div>
						<div class="right">
							<div class="right-head  withdraw">
								<div class="icon"></div>
								待打款
							</div>
							<p class="visit-p">{{ withdrawTotal }}</p>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :md="6" :xl="6">
				<div class="statistics statistics-o">
					<div class="statistics-h">
						<div class="order-color">
							<icon-svg class="z" name="icon-dingdan"></icon-svg>
							订单统计信息
						</div>
						<div>
							累计订单：
							<span class="order-color"> {{ orderNum || 0 }}个 </span>
						</div>
					</div>
					<div class="statistics-c">
						<div class="statistics-c-item" v-for="(item, index) in order" :key="index">
							<div class="title">
								{{ item.label }}
							</div>
							<div class="num order-color">{{ item.value }}个</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :md="6" :xl="6">
				<div class="statistics statistics-o">
					<div class="statistics-h">
						<div class="amount-color">
							<icon-svg class="z" name="icon-jiner"></icon-svg>
							金额统计信息
						</div>
					</div>
					<div class="statistics-c">
						<div class="statistics-c-item" v-for="(item, index) in amount" :key="index">
							<div class="title">
								{{ item.label }}
							</div>
							<div class="num amount-color">￥{{ item.value }}</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :md="6" :xl="6">
				<div class="statistics statistics-o">
					<div class="statistics-h">
						<div class="user-color">
							<icon-svg class="z" name="icon-yonghu2"></icon-svg>
							用户统计信息
						</div>
					</div>
					<div class="statistics-c">
						<div class="statistics-c-item" v-for="(item, index) in user" :key="index">
							<div class="title">
								{{ item.label }}
							</div>
							<div class="num user-color">{{ item.value }}人</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :md="6" :xl="6">
				<div class="statistics statistics-o" @click="$router.push('/audit/withdraw')">
					<div class="statistics-h">
						<div style="color:#FF947A">
							<icon-svg class="z" name="icon-chuli"></icon-svg>
							待处理提现审核
						</div>
					</div>
					<div class="statistics-c  agency ">
						<div>
							<icon-svg class="z" name="icon-tishi"></icon-svg>
						</div>
						<div>您有{{ withdrawingNum }}条待处理申请</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :md="12" :xl="12">
				<div class="statistics statistics-footer">
					<div class="statistics-h">
						<div>
							商品出单排行
						</div>
						<div class="date-picker">
							<el-date-picker
								size="mini"
								v-model="itemDate"
								type="date"
								placeholder="选择日期"
								@change="changeItemTime"
								:picker-options="pickerOptions0"
							>
							</el-date-picker>
						</div>
					</div>
					<div class="statistics-c   ">
						<div class="statistics-c-h-box">
							<div class="statistics-c-h">
								<div class="h-top">
									TOP10
								</div>
								<div class="h-c">
									商品名称
								</div>
								<div class="h-order">
									有效订单数
								</div>
							</div>
							<div
								class="statistics-c-c"
								v-for="(item, index) in itemRankingArr"
								:key="index"
							>
								<div class="h-top">
									<icon-svg
										v-if="index == 0"
										class="z"
										name="icon-no1"
									></icon-svg>
									<icon-svg
										v-if="index == 1"
										class="z"
										name="icon-no2"
									></icon-svg>
									<icon-svg
										v-if="index == 2"
										class="z"
										name="icon-no3"
									></icon-svg>
									<div class="top" v-if="index > 2">NO.{{ index + 1 }}</div>
								</div>
								<div class="h-c">
									{{ item.itemTitle }}
								</div>
								<div class="h-order">
									{{ item.orderNum }}
								</div>
							</div>
							<div
								style="padding:40px 0;text-align:center;"
								v-if="itemRankingArr == 0"
							>
								<icon-svg
									style="width:100px;height:100px"
									name="icon-empty"
								></icon-svg>
								<div
									style="line-height:20px;margin-top: -10px;color: #ccc;font-size:12px"
								>
									暂无数据
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>

			<el-col :md="12" :xl="12">
				<div class="statistics statistics-footer ">
					<div class="statistics-h">
						<div>
							用户出单排行
						</div>
						<div class="date-picker">
							<el-date-picker
								size="mini"
								v-model="userDate"
								type="date"
								placeholder="选择日期"
								@change="changeUserTime"
								:picker-options="pickerOptions0"
							>
							</el-date-picker>
						</div>
					</div>
					<div class="statistics-c   ">
						<div class="statistics-c-h-box">
							<div class="statistics-c-h">
								<div class="h-top">
									TOP10
								</div>
								<div class="h-c">
									用户名称
								</div>
								<div class="h-order">
									有效订单数
								</div>
								<div class="h-order">
									补贴金额
								</div>
							</div>
							<div
								class="statistics-c-c"
								v-for="(item, index) in userRankingArr"
								:key="index"
							>
								<div class="h-top">
									<icon-svg
										v-if="index == 0"
										class="z"
										name="icon-no1"
									></icon-svg>
									<icon-svg
										v-if="index == 1"
										class="z"
										name="icon-no2"
									></icon-svg>
									<icon-svg
										v-if="index == 2"
										class="z"
										name="icon-no3"
									></icon-svg>
									<div class="top" v-if="index > 2">NO.{{ index + 1 }}</div>
								</div>
								<div class="h-c">
									{{ item.nickName }}
								</div>
								<div class="h-order">
									{{ item.orderNum }}
								</div>
								<div class="h-order">
									￥{{ item.orderCommission.toFixed(2) || 0 }}
								</div>
							</div>
							<div
								style="padding:40px 0;text-align:center;"
								v-if="userRankingArr == 0"
							>
								<icon-svg
									style="width:100px;height:100px"
									name="icon-empty"
								></icon-svg>
								<div
									style="line-height:20px;margin-top: -10px;    color: #ccc;font-size:12px"
								>
									暂无数据
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import moment from 'moment';
import platform from '@/mixin/platform';
export default {
	data() {
		return {
			newDate: '',
			itemDate: '',
			userDate: '',
			order: [
				{
					label: '今日订单',
					value: 0
				},
				{
					label: '昨日订单',
					value: 0
				},
				{
					label: '今日已付款订单',
					value: 0
				},
				{
					label: '本月已付款订单',
					value: 0
				},
				{
					label: '本月已结算订单',
					value: 0
				},
				{
					label: '本月已失效订单',
					value: 0
				}
			],
			amount: [
				{
					label: '今日预估',
					value: 0
				},
				{
					label: '今日结算',
					value: 0
				},
				{
					label: '本月结算',
					value: 0
				},
				{
					label: '昨日预估',
					value: 0
				},
				{
					label: '昨日结算',
					value: 0
				},
				{
					label: '上月结算',
					value: 0
				}
			],
			user: [
				{
					label: '淘宝会员绑定',
					value: 0
				},
				{
					label: '今日登录人数',
					value: 0
				},
				{
					label: '今日访问人数',
					value: 0
				},
				{
					label: '今日新增人数',
					value: 0
				},
				{
					label: '今日新增淘宝绑定',
					value: 0
				},
				{
					label: '30天访问人数',
					value: 0
				}
			],
			usersTotal: 0, //用户总数
			thisMonthPay: 0, //本月预估
			lastMonthPay: 0, //上月预估
			withdrawTotal: 0, //累计提现
			withdrawcanTotal: 0, //可提现
			withdrawingNum: 0, //待审核笔数
			currentTime: '', //当前系统时间
			ip: '',
			itemRankingArr: [], //商品出单排行
			userRankingArr: [], //用户出单排行
			pickerOptions0: {
				disabledDate(newDate) {
					return newDate.getTime() > Date.now();
				}
			},
			tipsShow: true,
			orderNum: 0
		};
	},
	watch: {
		platformVal() {
			this.fetchData();
		}
	},
	mixins: [platform],
	mounted() {
		this.fetchData();
	},

	methods: {
		fetchData() {
			this.getOrder();
			this.getUser();
			this.getWithdraw();
			this.getIp();
			this.itemRanking();
			this.userRanking();
		},
		getOrder() {
			this.$service.workbench
				.order({})
				.then(res => {
					this.order[0].value = res.today.orderNum;
					this.order[1].value = res.yesterday.orderNum;
					this.order[2].value = res.today.payOrderNum;
					this.order[3].value = res.thisMonth.payOrderNum;
					this.order[4].value = res.thisMonth.settleOrderNum;
					this.order[5].value = res.thisMonth.invalidOrderNum;
					this.orderNum = res.orderNum;

					this.amount[0].value = res.today.payCommissionTotal;
					this.amount[1].value = res.today.settleCommissionTotal;
					this.amount[2].value = res.thisMonth.settleCommissionTotal;
					this.amount[3].value = res.yesterday.payCommissionTotal;
					this.amount[4].value = res.yesterday.settleCommissionTotal;
					this.amount[5].value = res.lastMonth.settleCommissionTotal;

					this.thisMonthPay = res.thisMonth.payCommissionTotal;
					this.lastMonthPay = res.lastMonth.payCommissionTotal;
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		getUser() {
			this.$service.workbench
				.user()
				.then(res => {
					this.user[0].value = res.taobaoTotle;
					this.user[1].value = res.loginToday;
					this.user[2].value = res.visitToday;
					this.user[3].value = res.registerToday;
					this.user[4].value = res.taobaoToday;
					this.user[5].value = res.visit30dDay;
					this.usersTotal = res.usersTotal;
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		getWithdraw(params) {
			this.$service.workbench
				.withdraw(params)
				.then(res => {
					this.withdrawTotal = res.withdrawTotal;
					this.withdrawcanTotal = res.withdrawcanTotal;
					this.withdrawingNum = res.withdrawingNum;
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		getIp() {
			this.$service.workbench
				.getIp()
				.then(res => {
					this.currentTime =
						moment(res.time).format('YYYY年MM月DD日 HH时mm分') ||
						moment().format('YYYY年MM月DD日 HH时mm分');
					this.ip = res.address;
					this.newDate = res.time;
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		userRanking(params) {
			this.$service.workbench
				.userRanking({
					limit: '10',
					...params
				})
				.then(res => {
					this.userRankingArr = res;
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		itemRanking(params) {
			this.$service.workbench
				.itemRanking({
					limit: '10',
					...params
				})
				.then(res => {
					this.itemRankingArr = res;
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		changeItemTime(e) {
			let startTime = moment(e).format('YYYY-MM-DD 00:00:00');
			let endTime = moment(e).format('YYYY-MM-DD 23:59:59');
			this.itemRanking({
				startTime,
				endTime
			});
		},
		changeUserTime(e) {
			let startTime = moment(e).format('YYYY-MM-DD 00:00:00');
			let endTime = moment(e).format('YYYY-MM-DD 23:59:59');
			this.userRanking({
				startTime,
				endTime
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.home {
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 10px;
	.tips {
		height: 48px;
		line-height: 48px;
		background: rgba(255, 255, 255, 1);
		border-radius: 8px;
		margin-top: 6px;
		margin-bottom: 10px;
		padding-left: 14px;
		display: flex;
		color: #8dc8ff;
		min-width: 800px;
		align-items: center;
		@include flexBox(space-between);
		.z {
			font-size: 24px;
			margin-right: 8px;
		}
		.del {
			margin-right: 20px;
			cursor: pointer;
		}
	}
	.card {
		background-color: #fff;
		border-radius: 5px;
		margin-bottom: 20px;
		.card-title {
			color: #000;
			padding: 20px 20px 0 20px;
		}
		.card-body {
			padding: 10px;
		}
	}
	.card-statistics {
		margin-top: 10px;
		.block {
			min-width: 200px;
			height: 121px;
			background-color: #fff;
			&.count {
				background: url('./assets/images/user_bg.png') no-repeat;
				background-size: 100% 100%;
				color: #bbddf7;
				.icon {
					border: 2px solid #bbddf7;
				}
			}
			&.people {
				background: url('./assets/images/visit_bg.png') no-repeat;
				background-size: 100% 100%;
				color: #b2ecdf;
				.icon {
					border: 2px solid #b1ecdf;
				}
			}
			&.estimate {
				background: url('./assets/images/estimate_bg.png') no-repeat;
				background-size: 100% 100%;
				color: #fddfb9;
				.icon {
					border: 2px solid #fddfb9;
				}
			}
			&.withdraw {
				background: url('./assets/images/withdrawal_bg.png') no-repeat;
				background-size: 100% 100%;
				color: #f9c4c5;
				.icon {
					border: 2px solid #f9c5c6;
				}
			}
			.val {
				height: 100%;
				display: flex;
				align-items: center;
				.left {
					margin-left: 24px;
					margin-right: 22px;
					.z {
						width: 66px;
						height: 66px;
					}
				}
				.right {
					margin-right: 20px;
					p {
						color: $color-white;
					}
					.right-head {
						display: flex;
						align-items: center;
						font-size: 13px;
						.icon {
							width: 10px;
							height: 10px;
							border-radius: 50%;
							margin-right: 3px;
						}
					}
					p {
						font-size: 24px;
						font-weight: bold;
						padding-top: 6px;
						margin: 0 0;
					}
				}
			}
		}
	}
	.statistics-o {
		height: 214px;
	}
	.statistics-footer {
		height: 530px;
		min-width: 500px;
	}
	.statistics {
		display: flex;
		flex-direction: column;
		background: rgba(255, 255, 255, 1);
		border-radius: 8px;
		margin-bottom: 23px;
		min-width: 280px;
		.order-color {
			color: #ff9c84;
		}
		.amount-color {
			color: #fcc05c;
		}
		.user-color {
			color: #51b8ea;
		}
		.statistics-h {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 13px;
			background-color: #fcfcfc;
			div:nth-child(1) {
				font-weight: 500;
			}
			div:nth-child(2) {
				font-size: 12px;
				color: #999999;
			}
			.date-picker {
				margin-right: 10px;
			}
		}
		.statistics-c {
			display: flex;
			flex-wrap: wrap;
			padding: 0px 20px 20px 20px;
			.statistics-c-item {
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-top: 26px;
				width: 33.333333%;
				.title {
					font-size: 12px;
					color: #999999;
				}
				.num {
					font-size: 16px;
					font-weight: bold;
					margin-top: 6px;
				}
			}
			.statistics-c-h-box {
				flex: 1;
			}
			.statistics-c-h {
				display: flex;
				flex: 1;
				color: #999999;
				font-size: 12px;
				text-align: center;
				padding: 15px 0;
				div:nth-child(1) {
					width: 80px;
				}
				div:nth-child(2) {
					flex: 2;
				}
				div:nth-child(3) {
					flex: 1;
				}
				div:nth-child(4) {
					flex: 1;
				}
			}
			.statistics-c-c {
				display: flex;
				flex: 1;
				color: rgba(39, 42, 59, 1);
				font-size: 16px;
				height: 42px;
				font-weight: 400;
				text-align: center;
				align-items: center;
				.h-top {
					.z {
						width: 26px;
						height: 33px;
					}
					.top {
						color: #f14d27;
						font-size: 16px;
						font-weight: bold;
					}
				}
				div:nth-child(1) {
					width: 80px;
				}
				div:nth-child(2) {
					flex: 2;
					@include ellipsis();
					width: 0px;
				}
				div:nth-child(3) {
					flex: 1;
				}
				div:nth-child(4) {
					flex: 1;
				}
			}
		}
		.agency {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #979899;
			.z {
				width: 42px;
				height: 48px;
				margin-bottom: 15px;
				margin-top: 36px;
			}
		}
	}
}
::v-deep .el-input__inner {
	border-width: 0px;
}

::v-deep .el-input--suffix .el-input__inner {
	padding-right: 10px;
}
.el-date-editor.el-input {
	width: 119px;
	margin-right: -15px;
	position: relative;
}
</style>
